<template>
<div id="regist">
  <div class="header"></div>
  
    <div class="content">
      <div class="main">
        <div class="icon">
          <img src="../img/logo.png" alt="">
        </div>
        <h1>注册小米账号</h1>
        <h4>用户名</h4>
        <div class="ipt1">
          <input class="ipt-area" type="text" placeholder="请输入用户名" v-model="inpname"/>
          <i><a-icon type="down-circle" /></i>
        </div>
        <!-- <div class="tip">成功注册账号后，国家/地区将不能被修改</div> -->
        <h4>手机号码</h4>
        <input class="ipt-phone" type="text" placeholder="请输入手机号码" v-model="iptphone"/>
        
        <input class="ipt-pwd" type="text" placeholder="请输入密码" v-model="iptpwd"/>
        <a-button class="reg" @click="reg">立即注册</a-button>
        <div class="reg" @click="log">立即登录</div>
        <div>
          <input type="radio" />注册账号即代表您同意并愿意遵守华为
          <span style="font-weight: bold">用户协议</span>
          和
          <span style="font-weight: bold">隐私政策</span>
        </div>
      </div>
    </div>
    <LogFoot></LogFoot>
  </div>
</template>

<script>
// import LogHead from "@/components/LogHead";
import LogFoot from "@/components/LogFoot";
import { message } from 'ant-design-vue';
export default {
  data:()=>{
    return{
    inpname:"",
    iptphone:"",
    iptpwd:""
    }
  },
  components: {
    // LogHead,
    LogFoot
  },
  methods:{
   reg(){
      this._axios.post("http://newshopapi.0melon0.cn/api/register",{
        name:this.inpname,
        phone:this.iptphone,
        password:this.iptpwd
      }

      ).then((res)=>{
        if(res){
         message.success("注册成功",1.5)
          this.$router.push({path:'/'})
        }
      })
      .catch((err)=>{
        if(err){
          message.error("该手机号已经注册",1.5)
        }
      })
      
    },
    log(){
      this.$router.push({path:"/"})
    }
    }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#regist{
  width: 1226px;
.header {
  height: 103px;
  width: 1226px;
  margin: 0 auto;
}
.content {
  width: 1226px;
  height: 565px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .main {
    height: 565px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .icon {
      width: 63px;
      height: 64px;
      // background-image: url("../img/logo.png");
      img{
        width: 100%;
      height: 100%;
      }
    }
    h1 {
      font-size: 30px;
      font-weight: bold;
      font-stretch: normal;
      color: #333333;
    }
    h4 {
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      color: #333333;
      align-self: flex-start;
      margin-left: 8%;
    }
    .ipt1,
    .ipt-phone,.ipt-pwd {
      width: 332px;
      height: 42px;
      border: solid 1px #e5e5e5;
    }
    .ipt1 {
      display: flex;
      align-items: center;

      .ipt-area {
        width: 290px;
        height: 42px;
        border: solid 1px #e5e5e5;
      }
      i {
        width: 16px;
        height: 16px;
        color:#333333;
        margin: 0 auto;
      }
    }
    .tip {
      align-self: flex-start;
      margin-left: 8%;
      margin-top: -9%;
    }
    .reg {
      width: 332px;
      height: 42px;
      background-color: #ff6700;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      line-height: 42px;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
}
}
</style>
